<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <!-- 左边文字 -->
      <el-col>
        <div class="left">员工历史归档</div>
      </el-col>
      <!-- 右侧日期选 -->
      <el-col>
        <el-row type="flex" justify="end">
          <el-date-picker
            v-model="year"
            type="year"
            format="yyyy"
            value-format="yyyy"
            placeholder="选择年"
            @change="handleChangeYear"
          />
        </el-row>
      </el-col>
    </el-row>

    <div v-show="showArchivig" class="archivig">该年份无归档报表</div>

    <div v-for="(item, index) in tableData" v-show="!showArchivig" :key="item.id">
      <!-- 归档列表 -->
      <el-row
        type="flex"
        class="archivigList"
        :class="{ act: item.act }"
        align="middle"
        @click.native="getArcDetails(item, index)"
      >
        <el-col :span="3" style="font-size: 18px">
          <i
            v-show="!item.act"
            style="font-weight: 700; line-height: 90px"
            class="el-icon-arrow-right"
          />
          <i
            v-show="item.act"
            style="font-weight: 700; line-height: 90px; color: #409eff"
            class="el-icon-arrow-down"
          />
        </el-col>
        <el-col class="shuxian" :span="1" />
        <el-col style="text-align: left; padding-left: 25px" :span="10">
          <div>{{ item.archiveYear }}-{{ item.archiveMonth }}月员工报表</div>
          <div class="small labTit">考勤统计</div>
        </el-col>
        <el-col />
        <el-col :span="10">
          <div>
            <div class="gray">总人数</div>
            <div class="big">{{ item.totalPeopleNum }}</div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="gray">全勤人数</div>
          <div class="big">{{ item.fullAttePeopleNum }}</div>
        </el-col>
      </el-row>

      <!-- 归档报表 -->
      <div v-show="item.act" class="itemDropDown">
        <!-- 提醒文字 -->
        <el-alert
          title="迟到、早退和补签的统计单位为“次”；所有假期类型、外出、旷工的统计单位均为“天”。"
          type="warning"
          :closable="false"
          show-icon
        />

        <!-- 导出按钮 -->
        <div class="rightLabBox">
          <a
            class="el-button fr el-button--primary el-button--mini"
            title="导出"
            @click="handleExport(item,index)"
          >导出</a>
        </div>

        <!-- 归档表格 -->
        <el-table
          id="item"
          :data="contentData"
          height="300"
          border
          style="width: 100%; text-align: center"
        >
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="workNumber" label="工号" width="100" />
          <el-table-column prop="mobile" label="手机号" width="200" />
          <el-table-column prop="department" label="部门" width="200" />
          <el-table-column prop="leaveDays" label="事假" width="100" />
          <el-table-column prop="dayOffLeaveDays" label="调休" width="100" />
          <el-table-column prop="normalDays" label="正常" width="100" />
          <el-table-column prop="laterTimes" label="迟到次数" width="100" />
          <el-table-column prop="earlyTimes" label="早退次数" width="100" />
          <el-table-column prop="absenceDays" label="旷工天数" width="100" />
          <el-table-column
            prop="isFullAttendanceint"
            :formatter="fStandards"
            label="是否全勤"
            width="100"
          />
          <el-table-column
            prop="actualAtteOfficialDays"
            label="实际出勤天数（正式）"
            width="180"
          />
          <el-table-column
            prop="workingDays"
            label="应出勤工作日"
            width="120"
          />
          <el-table-column
            prop="salaryOfficialDays"
            label="计薪天数（正式）"
            width="150"
          />
        </el-table>
        <!-- end -->
      </div>
    </div>
  </el-card>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getArchivingList, getArchivingCont } from '@/api/attendances.js'
export default {
  data() {
    return {
      year: '',
      showArchivig: false, // 显示无归档
      tableData: [], // 归档列表
      contentData: [] // 表格数据
    }
  },
  created() {
    this.getYear()
    this.getArchivingList()
  },
  methods: {
    // 获得当前年份
    getYear() {
      const date = new Date()
      this.year = date.getFullYear() + ''
    },

    // 获取年份的归档列表
    async getArchivingList() {
      const { depts } = await getDepartments()
      const departmentId = depts[0].id
      const res = await getArchivingList({
        departmentId: departmentId,
        year: this.year
      })

      if (res.length === 0) {
        this.showArchivig = true
      } else {
        this.showArchivig = false
        this.tableData = res
      }
    },

    // 获取月份的归档数据
    async getArcDetails(item, index) {
      if (!item.act) {
        const res = await getArchivingCont(item.id)
        console.log(res)
        this.contentData = res
        // this.tableData[index].act = true
        this.$set(this.tableData[index], 'act', true)
      } else {
        // this.tableData[index].act = false
        this.$set(this.tableData[index], 'act', false)
      }
    },

    // 是否全勤的格式化处理
    fStandards(state) {
      return state === 0 ? '是' : '否'
    },

    // 导出
    async handleExport(item, index) {
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      // console.log(export_json_to_excel)

      // 当前表格数据
      const res = await getArchivingCont(item.id)
      console.log(res.archiveDate)
      const year = item.archiveYear
      const month = item.archiveMonth

      const dict = {
        '姓名': 'name',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '部门': 'department',
        '事假天数': 'leaveDays',
        '调休天数': 'dayOffLeaveDays',
        '正常天数': 'normalDays',
        '迟到次数': 'laterTimes',
        '早退次数': 'earlyTimes',
        '旷工天数': 'absenceDays',
        '是否全勤': 'isFullAttendanceint',
        '实际出勤天数(正式)': 'actualAtteOfficialDays',
        '应出勤工作日': 'workingDays',
        '计薪天数': 'salaryOfficialDays'
      }

      const nweContent = res.map(user => {
        return this.object2Arrayy(user, dict)
      })

      export_json_to_excel({
        filename: `${year}年${month}月员工考勤报表`,
        header: Object.keys(dict),
        data: nweContent
      })
    },
    // 导出的字典处理
    object2Arrayy(user, dict) {
      const newUser = []
      for (const key in dict) {
        const enKey = dict[key] // 翻译成英文 string
        const value = user[enKey] // 拿到数据 string
        if (user.isFullAttendanceint === 0) {
          user.isFullAttendanceint = '是'
        } else {
          user.isFullAttendanceint = '否'
        }
        newUser.push(value)
      }
      return newUser
    },

    // 选择年份
    handleChangeYear() {
      this.getArchivingList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
.page-tools {
  margin: 20px 10px 0;
  .left {
    line-height: 34px;
    font-size: 18px;
    font-weight: 700;
    color: #409eff;
    display: inline-block;
    padding: 0px 33px;
    border-bottom: 2px solid #409eff;
  }

  .archivig {
    width: 100%;
    height: 350px;
    line-height: 350px;
    text-align: center;
  }

  .archivigList {
    height: 100px;
    border-bottom: 3px solid #ccc;
    .el-col {
      text-align: center;
      .small {
        font-size: 14px;
        margin-top: 10px;
      }
      .big {
        font-size: 18px;
        margin-top: 10px;
      }
      .gray {
        font-size: 14px;
        color: #999;
      }
    }
    .shuxian {
      display: inline-block;
      width: 15px;
      height: 70%;
      // background-color: #409eff;
    }
    &:hover {
      .shuxian {
        display: inline-block;
        width: 15px;
        height: 70%;
        background-color: #409eff;
      }
      cursor: pointer;
    }
  }

  .act {
    border-bottom: solid 3px #409eff;
    .el-col {
      .labTit {
        color: #409eff;
      }
    }
  }

  .rightLabBox {
    padding: 5px 0 5px 1200px;
  }
}
</style>
